<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper">
            <div class="title total_title">个人素材库 - 标题<el-button class="fr" type="primary" size="small" @click="addprotitle = true">新建标题
                </el-button>
            </div>
            <el-table :data="headlinedata" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}" style="width: 100%">
                <el-table-column prop="id" width="50" align="center" label="编号">
                </el-table-column>
                <el-table-column prop="line_title" label="标题" align="center">
                </el-table-column>
                <el-table-column prop="line_time" label="更新时间" align="center">
                </el-table-column>
                <el-table-column prop="state" width="300" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button style="margin-left: 10px;" size="mini" type="primary"
                            @click="addstaff = true,(scope.$index, scope.row)">修改</el-button>
                        <el-button style="margin-left: 10px;" size="mini" type="danger"
                            @click="handsc(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :total="300">
                </el-pagination>
            </el-row>
              <!-- 分割线 -->
              <el-dialog title="新建标题" :visible.sync="addprotitle" :close-on-click-modal="false" width="35%" center>
                <el-row type="flex" align="middle" justify="center">
                    <el-form :model="newprotitle" style="width: 85%;">
                        <el-form-item class="is-required">
                            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入标题"
                                v-model="newprotitle.content">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-button size="small" @click="addprotitle = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="addprotitle = false">确定</el-button>
                </el-row>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                projectId: 0,
                projectDetail: {},
                headlinedata:[],
                addprotitle:false,
                newprotitle:{
                    newprotitle:''
                }
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/titile')
                    .then(e => {
                        this.headlinedata = e.data.items
                        console.log('======', e.data)
                    })
                    .catch(err => {
                        console.log('======', err)
                    })
            },
            handsc() {
                this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>